<template>
	<view class="page" v-cloak>
		<!-- 自定义头部start -->

		<!-- 自定义头部end -->

		<!-- 图片轮播图 start -->
		<view id="banners" class="relative height-750">
			<swiper class="w100 height-750" :indicator-dots="false" :circular="true" @change="changeSwiper">
				<block v-for="(item, index) in swipers" :key="index">
					<swiper-item @click="preview(item, swipers)">
						<fu-image :src="item" mode="aspectFill"></fu-image>
					</swiper-item>
				</block>
			</swiper>
			<!-- <view class="pagination-left text-sm   padding-lr-sm line-height-40 width-290  height-40 radius-40"  v-if="horsRaceList.length>0">
				<swiper class="height-40" autoplay :vertical='true' :disable-touch='true' :circular='true'>
					<block v-for="(item, index) in horsRaceList" :key="index">
						<swiper-item>
							<view class=" text-cut">
									{{item.user_nickname}}购买了此商品
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view> -->
			<view class="pagination text-sm text-center  line-height-40 width-80 height-40 radius-40">
				{{ curSwiper }}/{{ swipers.length }}
			</view>
		</view>
		<!-- 图片轮播图 end -->
    <!-- 自定义头部start -->
    <view class="cu-custom">
      <view class="cu-bar fixed"
        :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px', backgroundColor: 'rgba(255,255,255,' + opacity + ')', boxShadow: '0 0 10rpx rgba(200,200,200,' + opacity + ')' }]">
        <view class="action" @tap="back">
          <text class="cuIcon-back"></text>
        </view>
        <view class="content tabs flex justify-center"
          :style="[{ top: StatusBar + 'px',height: CustomBar - StatusBar  + 'px',lineHeight: CustomBar - StatusBar  + 'px' }]"
          v-if="scrollTop > CustomBar">
          <view>商品详情</view>
          <!-- <block v-for="item in tabs" :key="item.title">
            <view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
              <view class="tab-item line-height-78 height-78 fu-fs28"
                :class="{ 'active text-333 fu-fs32': curTab == item.id }">{{ item.title }}</view>
            </view>
          </block> -->
        </view>
      </view>
    </view>
    <!-- 自定义头部end -->
		<!-- 商品信息展示区 start-->
		<view class="infos padding bg-white">
			<view class="flex justify-between align-center margin-top-sm">
				<view class="text-sm  word-break-all">
					<text v-if="goodsInfo.shop_price<=0">
						<text class="text-osd  text-xxl text-prices" style="font-size: 36rpx;">{{ goodsInfo.integral}}</text>
						<text class="text-df  margin-left-xs text-333">{{i18n['积分']}}</text>
					</text>
					<view class="flex align-end  text-bold text-lg" v-else>
						<view class="">
							<text class="text-prices" style="font-size: 36rpx;">{{ goodsInfo.integral}}</text>
							<text class="margin-left-xs text-333" style="font-size: 22rpx;">{{i18n['积分']}}</text>
						</view>
						<text class="text-333">+</text>
						<text class="text-prices" style="font-size: 36rpx;">{{ goodsInfo.shop_price}}</text>
						<text style="font-size: 22rpx;" class="text-333">元</text>
					</view>
				</view>
				<text class="text-price text-bold" style="font-size: 32rpx;">{{ goodsInfo.market_price}}</text>
			</view>
			<view class="text-lg text-333 word-break-all" style="margin-top: 28rpx;">{{ goodsInfo.name }}</view>
		</view>
		<!-- 商品信息展示区 end -->
		<!-- 规格,地址,服务,参数 -->
		<view class="margin-top-sm bg-white  padding-lr">
			<!-- 规格 start -->
			<view class="flex align-center" @tap="openPopup('specs')" v-if="goodsInfo.is_spec">
				<view class="text-df text-bold text-333 width-100">{{i18n['规格']}}</view>
				<view class="padding-tb flex align-center flex1 solid-bottom">
					<view class="flex1 text-df text-333 text-cut text-right">
						<text v-if="sku_name">{{ sku_name }}，</text> {{ goodsInfo.number }}{{i18n['件']}}
					</view>
					<view class="icon">
						<text class="cuIcon-right text-sm text-999"></text>
					</view>
				</view>
			</view>
			<!-- 规格 end -->
			<!-- 地址 start -->
		<!-- 	<view class="flex align-center" @tap="switchAddress(addrs.length)" v-if="curAddr">
				<view class="text-df text-bold text-333 width-100">{{i18n['送至']}}</view>
				<view class="padding-tb  flex align-center flex1 solid-bottom">
					<view class="flex1 align-center flex text-df text-333 text-cut ">
						<image class="address-icon fu-block-32" :src="imgBaseUrl+'goods/address-copn1.png'" />
						<text class="margin-left-xs text-cut" style="width: 550rpx;" v-if="addrs.length > 0">{{ curAddr.province }}{{ curAddr.city }}{{
              curAddr.district
              }}{{ curAddr.address }}</text>
						<text v-else>{{i18n['添加地址信息']}}</text>
					</view>
					<view class="icon">
						<text class="cuIcon-right text-sm text-999"></text>
					</view>
				</view>
			</view> -->
			<!-- 地址 end -->
			<view class="flex align-center" >
				<view class="text-df text-bold text-333 width-100">{{i18n['运费']}}</view>
				<view class="padding-tb flex align-center flex1 solid-bottom">
					<view class="flex1 text-df text-333 text-cut text-right">
						{{i18n['包邮']}}
					</view>
					<!-- <view class="icon">
						<text class="cuIcon-right text-sm text-999"></text>
					</view> -->
				</view>
			</view>
		<!-- 	<view class="list-item">
			  <view class="title">{{i18n['运费']}}</view>
			  <view class="content">
			    <view class="mes text-df text-333 text-cut"></view>
			    <view class="icon">
			      <text class="title_left">{{i18n['包邮']}}</text>
			    </view>
			  </view>
			</view> -->

		</view>
		<!-- 评价展示区 start-->
		<!-- <view id="evaluates" class="padding-tb margin-top-sm radius-20 bg-white padding-lr">
			<view class="title flex justify-between align-center" @tap="navToComment">
				<view class="text-bold flex align-center">
					<view class="width-6 height-32 bg-theme radius-16 margin-right-14"></view>
					<text class="text-lg text-333">{{i18n['商品评价']}}</text>
					<text class="text-333 text-df margin-left-xs">({{ comment_total }})</text>
				</view>
				<view>
					<text class="text-sm text-333"
						v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">{{ i18n['好评率'] + goodsInfo.praise_rate + '%' }}</text>
					<text class="text-sm text-999" v-else>{{i18n['查看全部']}}</text>
					<text class="cuIcon-right text-sm text-999 margin-left-xs"></text>
				</view>
			</view>
			<view class="content" v-if="comment.length > 0">
				<block v-for="(item, index) in comment" :key="index">
					<fu-evaluate :prop="item"></fu-evaluate>
				</block>
			</view>
		</view> -->
		<!-- 评价展示区 end-->
		<!-- 商品详情 start -->
		<view id="details" class=" bg-white margin-top-sm padding">
			<view class="text-bold flex align-center padding-bottom-sm">
				<view class="width-6 height-32 bg-theme radius-16 margin-right-14"></view>
				<view class="text-333">{{i18n['商品详情']}}</view>
			</view>
			<view class="padding-lr padding-bottom word-break-all">
				<jyf-parser :html="body"></jyf-parser>
			</view>
		</view>
		<!-- 商品详情 end -->
		
		<!-- <view class="cu-btn bg-theme bottoms round text-white  " v-if="user_score >= goodsInfo.integral"
			@tap="redeem">
			{{i18n['立即兑换']}}
		</view>
		<view class="cu-btn  nobottoms round block " v-else> {{i18n['积分不足']}} </view> -->
		<!-- 底部栏  start-->
		<view class="bottom-action ">
		  <button v-if="user_score >= goodsInfo.integral" class="bottom-action-box  bottom-color"
		   @tap="redeem"> {{i18n['立即兑换']}}</button>
		  <button v-else class="bottom-action-box  nobottoms"> {{i18n['积分不足']}}</button>
		</view>
		
		<!-- 底部栏  end-->
		<!-- 地址弹窗  start-->
		<fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
		<!-- 地址弹窗  end-->
		<!-- 规格弹窗 start-->
		<fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
			:limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @buyNow="buyNow"></fu-specs-popup>
		<!-- 规格弹窗 end-->
		<!-- 运费说明弹窗 -->
		<fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测 end -->
	</view>
</template>

<!--
is_pure_integral 是否纯积分兑换
1 :纯积分兑换
0 :积分加 钱计算
-->

<script>
	import {
		SHAREURL
	} from '@/common/config.js';
	import richText from '@/common/utils/richText.js';
	import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
	import fuGoodsAddress from '../../components/fu-goods-address/fu-goods-address.vue';
	import fuSpecsPopup from '../../components/fu-specs-popup/fu-specs-popup.vue';
	import fuExplain from '../../components/fu-explain/index.vue';
	export default {
		name: 'integral-goods-detail',
		components: {
			fuEvaluate,
			fuGoodsAddress,
			fuSpecsPopup,
			fuExplain
		},
		data() {
			return {
				is_pure_integral: 0,
				user_score: 0, //当前可用积分
				selectAll: {}, //选择了那个规格  不同的规格对应的价格不同
				curSwiper: 1, // 当前轮播图index
				tabs: [{
						title: global.i18n["宝贝"],
						id: "banners",
					},
					{
						title: global.i18n["评价"],
						id: "evaluates",
					},
					{
						title: global.i18n["详情"],
						id: "details",
					},
				], //商品详情分类导航
				number: 1, //兑换数量
				StatusBar: this.StatusBar, //状态栏高度
				CustomBar: this.CustomBar, //标题栏高度
				curTab: "banners", //显示那个轮播图
				scrollTop: 0, // 距离顶部高度    用来计算显示顶部导航
				opacity: 0, //来设置顶部导航的透明度
				swipers: [], // 轮播图
				goodsInfo: {}, // 商品信息
				spec_list: [], // 规格列表
				sku_list: [], // 规格参照列表
				sku_id: 0, // 当前规格id
				sku_name: "", //  当前规格名称
				goods_id: 0, // 商品id
				activity_id: 0, //活动id
				body: "", // 商品介绍
				comment: [], // 评论列表
				comment_total: 0, // //评论条数
				activityInfo: {}, // 活动信息
				limit: 0, // 限购数量
				addrs: [], //地址列表
				curAddr: {}, //选择的当前地址
				downInfo: {}, //活动内容
				freight_explain: '', //{String} 运费说明
				explain_title: '', //{String}运费说明标题
				shareCode: '', //{String}分享的图片路径
				shareUrl: '', //{String}分享的地址路径
				horsRaceList:[] //跑马灯
			};
		},
		/**
		 * @description 页面初始化
		 * @param {Object} options goods_id：商品id  activity_id：活动id  sku_id:规格id
		 */
		onLoad(options) {
			const {
				goods_id
			} = options;
			this.goods_id = goods_id;
			// this.loadHorsRaceLamp()
		},
		/**
		 * @description 若已经登录获取地址信息
		 */
		onShow() {
			if (global.token) {
				this.loadAddress();
				this.getIntegralInfo();
			}
		},
		/**
		 * @description 页面滚动事件
		 * @param {Object} e 获取已经滚动的高度(距离顶部)
		 */
		onPageScroll(e) {
			let top = e.scrollTop;
			let navH = 115 + this.StatusBar;
			this.scrollTop = top;
			this.opacity = (top / 100).toFixed(2);
			if (top >= 0 && top <= this.tabs[1].top - navH) {
				this.curTab = 'banners';
			} else if (top >= this.tabs[1].top - navH && top < this.tabs[2].top - navH) {
				this.curTab = 'evaluates';
			} else if (top >= this.tabs[2].top - navH) {
				this.curTab = 'details';
			}
		},
		/**
		 *@description 下拉加载重新刷新
		 */
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			//获取商品跑马灯
			loadHorsRaceLamp() {
				this.$api.post(global.apiUrls.postHorseRaceLamp, {
					goods_id: this.goods_id
				}).then(res => {console.log("跑马灯: ", res);
					if (res.data.code == 1) {
						this.horsRaceList = res.data.data
					}
				})
			},
			/**
			 * @event
			 * @description  获取二维码
			 * @param {Number} goods_id 商品id
			 * @param {Number} activity_id 活动id
			 * @param {Number} sku_id 规格id
			 */
			getShareCode() {
				// #ifdef MP-WEIXIN
				let data = {
					a: this.goods_id,
					b: this.activity_id || 0,
					c: this.sku_id || 0
				};
				let dataStr = this.$util.serialize(data);
				let page = 'pages/integral/integralgoods/ntegral-goods-detail/index';
				this.$api
					.post(global.apiUrls.postShareCode, {
						page: page,
						scene: dataStr,
						width: 180
					})
					.then(res => {
						if (res.data.code == 1) {
							let data = res.data.data.base64;
							this.$util
								.base64ToPath(data)
								.then(res => {
									this.shareCode = res;
									this.$refs.share.init();
								})
								.catch(err => {
									this.$message.info(this.i18n['保存临时二维码失败']);
								});
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log('获取分享二维码失败', err);
					});
				// #endif
				// #ifndef MP-WEIXIN
				this.$api
					.post(global.apiUrls.postAppShareCode, {
						goods_id: this.goods_id,
						activity_id: this.activity_id || 0,
						sku_id: this.sku_id || 0
					})
					.then(res => {
						let data = res.data;
						if (data.code == 1) {
							let url = data.data.qrcode_url;
							let href = data.data.url;
							this.shareCode = url;
							this.shareUrl = href;
							this.$refs.share.init();
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log(err);
					});
				// #endif

			},
			/**
			 * @event
			 * @description  打开运费弹窗
			 */
			switchFreight() {
				this.openPopup('explain');
			},
			/**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
			/**
			 * @description 获取积分统计
			 */
			getIntegralInfo() {
				this.$api
					.get(global.apiUrls.getMyMoney)
					.then((res) => {
						if (res.data.code == 1) {
							this.user_score = res.data.data.score;
							this.loadData();
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch((err) => {
						console.log("err: " + JSON.stringify(err));
					});
			},
			/**
			 * @description 点击立即兑换
			 */
			redeem() {
				if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品已兑换完了,看看其它的吧']);
				if (this.number > this.goodsInfo.stock) return this.$message.info(this.i18n['兑换数量超过商品上限']);
				this.close();
				this.buyNow()
			},
			/**
			 * @description 关闭选择规格的弹框
			 */
			close() {
				if (this.$refs.number) {
					this.$refs.number.close()
				}

			},
			/**
			 * @description 改变购买商品的数量
			 * @param {Object} value 购买商品的数量
			 */
			changeNumber(value) {
				this.number = value;
			},

			/**
			 * @description 返回上一个页面
			 */
			back() {
				uni.navigateBack();
			},
			/**
			 * @description 轮播图切换
			 * @param {Object} e 获取滚动的序号
			 */
			changeSwiper(e) {
				this.curSwiper = e.detail.current + 1;
			},
			/**
			 * @description  获取地址
			 */
			loadAddress() {
				this.$api.post(global.apiUrls.getUserAddressAddressList).then((res) => {
					if (res.data.code == 1) {
						this.addrs = res.data.data;
					}
				});
			},
			/**
			 * @description tab栏切换  通过滚动事件 滚动到指定的高度
			 * @param {Object} item id:导航id
			 */
			changeTab(item) {
				this.curTab = item.id;
				let nowScrollTop = this.scrollTop;
				uni
					.createSelectorQuery()
					.in(this)
					.select("." + item.id)
					.boundingClientRect((pos) => {
						let posTop = pos.top;
						if (posTop == 0 && nowScrollTop != 0) return;
						uni.pageScrollTo({
							duration: 0,
							scrollTop: posTop + nowScrollTop - 100 - this.StatusBar,
						});
					})
					.exec();
			},
			/**
			 * @description 打开弹窗
			 * @param {Object} type  打开那个弹出框
			 */
			openPopup(type) {
				this.$refs[type].open();
			},
			/**
			 * @description  获取商品详情
			 */
			loadData() {
				this.$api
					.post(global.apiUrls.getInterGoodsDetail, {
						goods_id: this.goods_id,
					})
					.then((res) => {
						if (res.data.code == 1) {
							let data = res.data.data;
							this.swipers = data.images;
							// 提取  商品基本信息  用于分享
							this.goodsInfo = data;
							// this.is_pure_integral = data.is_pure_integral
							this.goodsInfo = {
								praise_rate: data.praise_rate,
								integral: data.integral,
								shop_price: data.shop_price,
								name: data.name,
								price: data.shop_price,
								activity_price: data.activity_price,
								market_price: data.market_price,
								thumb: data.thumb,
								description: data.description,
								is_collect: data.is_collect,
								number: 1,
								stock: data.activity_stock || data.stock || 0,
								totalStock: data.activity_stock || data.stock || 0,
								sales_sum: data.sales_sum || 0,
								is_spec: data.is_spec,
								user_score: this.user_score,
								freight_price: data.freight_price,
							};
							if (data.freight_explain) {
								this.freight_explain = data.freight_explain.replace(/\n/g, "<br/>");
							}
							this.explain_title = data.freight_name;
							this.limit = data.limit || 0;
							this.body = richText.format(data.body);
							this.comment = data.comment || [];
							this.comment_total = data.comment_total || 0;
							//判断商品规格
							if (data.is_spec == 1) {
								this.spec_list = data.spec_list;
								this.sku_list = Object.values(data.sku_list)
									.map((item) => {
										item.sku_spec = item.key.split("_");
										return item;
									})
									.filter((item) => {
										return item.stock > 0;
									});
								this.selectAll = this.sku_list[0];
								this.selectAll.thumb = data.thumb;
							} else {
								this.selectAll = {
									integral: res.data.data.integral,
									shop_price: res.data.data.shop_price,
									stock: res.data.data.stock,
									sku_id: res.data.data.sku_id,
									market_price: data.market_price
								}
							}
							if (data.activity_info && data.activity_info.activity_type != 0) {
								this.initDownTime(data.activity_info.surplus_time);
							}
							uni.stopPullDownRefresh();
							this.$nextTick(() => {
								// this.computedPosTop();
								if (data.is_spec == 1) {
									setTimeout(() => {
										this.$refs.specs.init();
									}, 100)
								}
							});

						} else {
							this.$message.info(this.i18n["获取详情失败"]);
							setTimeout(() => {
								// uni.navigateBack();
							}, 300);
						}
					});
			},
			/**
			 * @description  初始化倒计时
			 * @param {Object} time   距离活动结束还有多久
			 */
			initDownTime(time) {
				time = Number(time);
				if (time > 0) {
					console.log('aaa', time);
					let timeInfo = this.$util.downTime(time * 1000);
					this.downInfo = {
						title: this.i18n['距秒杀结束仅剩'],
						days: timeInfo.days,
						hours: timeInfo.hours,
						minutes: timeInfo.minutes,
						seconds: timeInfo.seconds,
					}
				}
			},
			/**
			 * @description  计算锚点位置
			 */
			computedPosTop() {
				const query = uni.createSelectorQuery().in(this);
				this.tabs.forEach((item, index) => {
					query.select('#' + item.id).boundingClientRect(data => {
						this.$set(this.tabs[index], 'top', data.top);
					}).exec();
				})
			},
			/**
			 * @description  收藏
			 */
			collect() {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postGoodsCollection, {
							collect_id: this.goods_id,
							sku_id: this.sku_id,
							collect_title: this.goodsInfo.name,
							type: 1,
						})
						.then((res) => {
							if (res.data.code == 1) {
								console.log("collect", res.data);
								if (this.goodsInfo.is_collect) {
									this.goodsInfo.is_collect = 0;
								} else {
									this.goodsInfo.is_collect = 1;
								}
								this.$message.info(res.data.msg);
							}
						});
				});
			},
			/**
			 * @description 修改购买数量
			 * @param {Object} num 改变数据 用于 直接改变数据
			 */
			setNumber(num) {
				this.goodsInfo.number = num;
			},
			/**
			 * @description  修改购买规格
			 * @param {Object} skuInfo 获取选取规格后的 名称 字段 价格 id  等信息
			 */
			setSpec(skuInfo) {
				this.selectAll = skuInfo
				const {
					key_name,
					integral,
					shop_price,
					market_price,
					sku_id,
					stock
				} = skuInfo;
				this.sku_id = sku_id;
				this.sku_name = key_name;
				this.goodsInfo.integral = integral;
				this.goodsInfo.shop_price = shop_price;
				this.goodsInfo.stock = stock;
			},
			/**
			 * @description 立即兑换
			 */
			buyNow() {
				this.$util.actionAuth(() => {
					if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
					if (this.addrs.length == 0) {
						this.$message.info(this.i18n['请先添加收货地址']);
						setTimeout(() => {
							this.$urouter.navigateTo({
								url: '/pages/user/address/address-list/index',
								params: {
									type: 1,
									id: 0
								}
							});
						}, 800)
						return;
					}
					let data = {
						goods_id: this.goods_id,
						number: this.goodsInfo.number,
						dataSource: 1,
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id || 0;
					}
					if (this.curAddr) {
						data.address_id = this.curAddr.address_id;
					}
					if (this.activity_id) {
						data.activity_id = this.activity_id;
					}
					this.$urouter.navigateTo({
						url: "/pages/integral/integral-order-process/confirm-order/index",
						params: data,
					});
				});
			},
			/**
			 * @description 选择地址
			 */
			switchAddress(num) {
				this.$util.actionAuth(() => {
					if (num > 0) {
						this.openPopup("address");
					} else {
						this.$urouter.navigateTo({
							url: '/pages/address/address-list/index',
							params: {
								type: 1,
								id: 0
							}
						});
					}

				});
			},
			/**
			 * @description 去评价列表
			 */
			navToComment() {
				if (this.comment_total == 0)
					return this.$message.info(this.i18n["该商品暂无评论"]);
				this.$urouter.navigateTo({
					url: "/pages/goods/goodsdetail/goods-comment/index",
					params: {
						goods_id: this.goods_id,
					},
				});
			},
			/**
			 * @description 改变收货地址
			 * @param {Object} e 地址信息
			 */
			changeAddress(e) {
				this.curAddr = e;
				this.$refs.address.close()
			},
		},

	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.pagination-left {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 32rpx;
		bottom: 32rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.pagination {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		right: 32rpx;
		bottom: 32rpx;
		color: rgba(255, 255, 255, 0.8);
	}


	// 图片轮播图 end
	//悬浮Tab栏 start
  .tabs {
    width: 100%;
    pointer-events: all;

    .tab-item {
      border-bottom: 4rpx solid white;

      &.active {
        border-bottom-color: $theme;
      }
    }
  }

	//悬浮Tab栏 end

	//价格展示区 end
	//商品信息展示区 start
	.infos {
		// border-radius: 0 0 20rpx 20rpx;
	}

	.word-break-all {
		word-break: break-all;
	}


	.bottoms {
		height: 55rpx;
		font-size: 25rpx;
		background: $bgtheme !important;
	}

	.nobottoms {
		height: 55rpx;
		font-size: 25rpx;
		background-color: #9B989C;
		color: white;

	}
	
	// 底部栏  start
	.bottom-action {
	  background-color: white;
	  font-size: 30rpx;
	  letter-spacing: 5rpx;
	  border-radius: 0 !important;
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 9999;
	  padding-bottom: calc(constant(safe-area-inset-bottom));
	  padding-bottom: calc(env(safe-area-inset-bottom));
	
	  .bottom-action-box {
	    border-radius: 0 !important;
	    font-size: 30rpx;
	    letter-spacing: 5rpx;
	    color: white;
	    height: 88rpx;
	    line-height: 88rpx;
	  }
	
	}
	
	.bottom-color {
	  background: $bgtheme;
	}
	
	.nobottoms {
	  background-color: #999999 !important;
	  color: white;
	}
	
	// 底部栏  end
</style>
